<template>
  <HPopup style="height: 100vh; min-height: 100vh" position="right" v-model:show="innerShow">
    <VerticalLayout>
      <template #header>
        <div>
          <UserManualSelectHeader content="选择执行人"/>
        </div>
        <UserManualSelectSearch v-model="searchText"/>
      </template>
      <UserManualSelectSelectorPopupUserSelector :node="selectedNode" :users="searchedUsers"/>
    </VerticalLayout>
  </HPopup>
</template>
<script setup>
import {createProps} from '@/utils';
import HPopup from '@comp/HPopup/HPopup.vue';
import {computed, shallowRef} from 'vue';
import UserManualSelectHeader from '@comp/UserManualSelect/UserManualSelectHeader.vue';
import VerticalLayout from '@comp/Layout/VerticalLayout.vue';
import UserManualSelectSearch from '@comp/UserManualSelect/UserManualSelectSearch.vue';
import UserManualSelectSelectorPopupUserSelector
  from '@comp/UserManualSelect/UserManualSelectSelectorPopupUserSelector.vue';

defineOptions({name: 'UserManualSelectSelectorPopup'});
const props = defineProps({
  visible: createProps(Boolean),
  selectedNode: createProps(Object),
});
const emits = defineEmits(['update:visible']);
const searchText = shallowRef();
const innerShow = computed({
  get() {
    return props.visible;
  },
  set(value) {
    emits('update:visible', value);
  }
});
const searchedUsers = computed(() => {
  let users = props?.selectedNode?.users || [];
  if (!searchText.value) return users;
  return users.filter(user => user.username.indexOf(searchText.value) > -1);
});
</script>
<style scoped lang="less">

</style>